TNotes.javascript

Appearance

0080. confirm

0080. confirm ​

1. 🎯 本节内容 ​

  • window.confirm()

2. 🫧 评价 ​

  • 很简单的一个 API，类似 window.alert()，两者的区别是 window.alert() 是一个 void 类型的函数，而 window.confirm() 返回一个 boolean 类型的值。
  • 实际开发中 confirm 提示框大多是直接使用 UI 组件库中封装好的 confirm 组件，或者自行封装，比如 demos.2。
  • demos 概述
    • demos.1 - 介绍 window.confirm 的基本使用
    • demos.2 - 自行封装了一个简单的 confirm 组件

3. 📒 window.confirm() ​

  • window.confirm() 就是用来弹出一个提示框的，并会返回一个布尔值。
    • 如果用户点击了确定，返回 true
    • 如果用户点击了取消，返回 false
  • 弹出对话框时，会暂停脚本执行，直到用户点击了确定或者取消。
  • 使用 window.confirm 可以弹出一个确认提示框，但是无法自定义 UI。如果有修改 UI 的需求，可以考虑使用第三方库，或者自行编写一个简单的 confirm 组件来实现，比如 demos.2。

4. 💻 demos.1 - 使用 window.confirm() 弹出确认提示框 ​

js
if (window.confirm('您确定要重新加载此网站吗？')) {
  // 用户点击了“确定”，执行重新加载操作
  location.reload()
} else {
  // 用户点击了“取消”，不做任何操作
}
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="./1.js"></script>
  </body>
</html>
  • img

5. 💻 demos.2 - 自定义 confirm 效果 ​

html
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自定义 Confirm 对话框</title>
    <link rel="stylesheet" href="./1.css" />
  </head>
  <body>
    <h1>自定义 Confirm 示例</h1>
    <button id="showConfirm">点击弹出自定义确认框</button>
    <script src="./1.js"></script>
    <script>
      document
        .getElementById('showConfirm')
        .addEventListener('click', async () => {
          const result = await customConfirm(
            '删除确认',
            '你确定要删除这个项目吗？此操作不可撤销。',
            { confirmText: '删除', cancelText: '取消' }
          )

          if (result) {
            alert('用户点击了“删除”')
          } else {
            alert('用户取消了操作')
          }
        })
    </script>
  </body>
</html>
js
/**
 * 自定义 confirm 函数
 * @param {string} title - 对话框标题
 * @param {string} message - 对话框内容
 * @param {Object} options - 可选配置 { confirmText, cancelText }
 * @returns {Promise<boolean>} 用户是否确认
 */
function customConfirm(
  title = '确认操作',
  message = '你确定要执行此操作吗？',
  options = {}
) {
  const { confirmText = '确定', cancelText = '取消' } = options

  // 返回一个 Promise，以便异步使用
  return new Promise((resolve) => {
    // 创建遮罩层
    const overlay = document.createElement('div')
    overlay.className = 'custom-confirm-overlay'

    // 创建对话框
    const dialog = document.createElement('div')
    dialog.className = 'custom-confirm'

    dialog.innerHTML = `
          <h3>${title}</h3>
          <p>${message}</p>
          <div class="custom-confirm-buttons">
            <button class="custom-confirm-button cancel" data-action="cancel">${cancelText}</button>
            <button class="custom-confirm-button confirm" data-action="confirm">${confirmText}</button>
          </div>
        `

    // 添加事件监听
    dialog
      .querySelector('[data-action="cancel"]')
      .addEventListener('click', () => {
        overlay.remove()
        resolve(false)
      })

    dialog
      .querySelector('[data-action="confirm"]')
      .addEventListener('click', () => {
        overlay.remove()
        resolve(true)
      })

    // 点击遮罩层关闭（可选）
    overlay.addEventListener('click', (e) => {
      if (e.target === overlay) {
        overlay.remove()
        resolve(false)
      }
    })

    // 组装
    overlay.appendChild(dialog)
    document.body.appendChild(overlay)
  })
}
css
body {
  font-family: Arial, sans-serif;
  padding: 20px;
}

button {
  padding: 10px 15px;
  font-size: 16px;
  cursor: pointer;
}

/* 遮罩层 */
.custom-confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* 对话框主体 */
.custom-confirm {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  width: 300px;
  text-align: center;
}

.custom-confirm h3 {
  margin-top: 0;
  color: #333;
}

.custom-confirm p {
  color: #666;
  margin-bottom: 20px;
}

.custom-confirm-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.custom-confirm-button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.custom-confirm-button.confirm {
  background-color: #007bff;
  color: white;
}

.custom-confirm-button.cancel {
  background-color: #6c757d;
  color: white;
}

.custom-confirm-button:hover {
  opacity: 0.9;
}

.custom-confirm-button:active {
  transform: scale(0.98);
}
  • img

6. 🔗 引用 ​

Discussions